<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选项卡</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul,
      ol,
      li {
        list-style: none;
      }

      .box {
        width: 600px;
        height: 400px;
        border: 3px solid pink;
        margin: 50px auto;
        display: flex;
        flex-direction: column;
      }

      .box > ul {
        height: 60px;
        display: flex;
      }

      .box > ul > li {
        flex: 1;
        background-color: skyblue;
        color: #fff;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }

      .box > ul > li.active {
        background-color: orange;
      }

      .box > ol {
        flex: 1;
        position: relative;
      }

      .box > ol > li {
        width: 100%;
        height: 100%;
        background-color: purple;
        position: absolute;
        left: 0;
        top: 0;
        font-size: 100px;

        display: none;
      }

      .box > ol > li.active {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li class="active">a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
      </ul>
      <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ol>
    </div>
    <script>
      var uls = document.querySelector('ul');
     
      var olLi = document.querySelector('ol').querySelectorAll('li');//获取ol下面的每个li
      var ulLi = document.querySelector('ul').querySelectorAll('li');//获取ul下面的每个li
      
      
      //方案1 根据ul下面的li的内容,切换ol下面的li

      uls.addEventListener('click', function (e) {
        //清除样式
        for (var i = 0; i < ulLi.length; i++) {
          ulLi[i].className = '';
          olLi[i].className = '';
        }

        //判断是否点击到li
        if ((e.target.tagName = 'LI')) {
          e.target.className = 'active';

          //根据点击到li的内容,给ol下面的每个li添加样式
          switch (e.target.textContent) {
            case 'a':
              olLi[0].className = 'active';
              break;
            case 'b':
              olLi[1].className = 'active';
              break;
            case 'c':
              olLi[2].className = 'active';
              break;
            case 'd':
              olLi[3].className = 'active';
              break;
          }
        }
      });
    

      //方案2 使用forEach遍历ul下面的li,根据li的索引选中ol下面的li
      ulLi.forEach((item,index) => {
        item.onclick=function(){
          for (var i = 0; i < ulLi.length; i++) {
          ulLi[i].className = '';
          olLi[i].className = '';
        }

        this.className='active'
        olLi[index].className='active'
        }
      });
    
    
    </script>

<script>
      //方案3 把所有li放到数组里面进行操作
  var lis = [...document.querySelectorAll('li')];
  var arrul = lis.slice(0, 4);
  var arrol = lis.slice(4, 8);
  arrul.forEach((item, index) => {
    item.onclick = function () {
      for (var i = 0; i < arrul.length; i++) {
        arrul[i].className = '';
        arrol[i].className = '';
      }
      item.className = 'active';
      arrol[index].className = 'active';
    };
  });
</script>
  </body>
</html>
